<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/common.css">
<style>
    #goodsIndex {
        background: #fff;
        padding: 0 20px;
        overflow: auto;
        color: #666;
    }

    .btn-common {
        line-height: 32px;
        height: 32px;
        cursor: pointer;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .add-params,
    .add-level1-sku {
        width: 98px;
        background: #7536D0;
        color: #fff;
    }

    .add-params span,
    .add-level1-sku span {
        margin-left: 8px;
    }

    /* el-step */
    .el-step.is-simple .el-step__title {
        font-size: 14px;
        font-weight: 600;
    }

    .el-step.is-simple .el-step__icon {
        display: none;
    }

    .el-step__title.is-finish {
        color: #7438D5;
    }

    .el-step__title.is-process {
        color: #666;
        font-weight: 500;
    }

    .el-step__title.is-wait {
        color: #999;
    }

    .el-form-item {
        margin-bottom: 20px;
    }

    .good-detail-body {
        padding: 20px 10px 10px 5px;
        height: calc(100vh - 148px);
        overflow: auto;
    }

    .add-img {
        width: 60px;
        height: 60px;
        border: 1px dashed #E6E6E6;
        border-radius: 4px;
        justify-content: center;
        margin-right: 30px;
        margin-bottom: 10px;
    }

    .form-tip-message {
        margin-left: 30px;
        color: #999;
    }


    .back-button {
        width: 88px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        margin-right: 20px;
        color: #999;
        cursor: pointer;
    }

    .submit-button {
        width: 88px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: #7438D5;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
    }

    .goods-detail-table {
        border: 1px solid #E6E6E6;
        border-bottom: none;
        margin-bottom: 20px;
    }

    .goods-detail-item {
        border-bottom: 1px solid #E6E6E6;
    }

    .goods-detail-item>div {
        padding: 5px 10px;
    }

    .goods-detail-name {
        width: 120px;
    }

    .goods-detail-msg {
        width: 378px;
    }

    .goods-detail-del,
    .goods-detail-move {
        width: 50px;
        display: flex;
        justify-content: center;
    }

    .goods-detail-del-icon {
        color: #ff5959;
    }

    .delete-image-button {
        position: absolute;
        width: 14px;
        height: 14px;
        line-height: 14px;
        text-align: center;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 600;
        background: #7438D5;
        color: #fff;
        top: -7px;
        right: -7px;
    }

    .goods-images {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        position: relative;
        border: 1px solid #7438D5;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .goods-image {
        margin-right: 0;
    }

    .label-auto {
        width: 100%;
        height: 100%;
        border-radius: 4px;
    }

    .add-sku-box {
        padding: 10px 8px;
        border: 1px solid #E6E6E6;
    }

    .sku-item {
        background: #F9F9F9;
        height: 50px;
        padding: 10px;
    }

    .sku-item-level {
        height: auto;
        background: #fff;
        padding: 10px 20px;
    }

    .sku-item-level2 {
        height: auto;
        padding: 0;
        width: 600px;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        line-height: 30px;
    }

    .sku-children {
        margin-right: 18px;
        position: relative;
        width: 120px;
        margin-bottom: 10px;
    }

    .sku-children-del {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        position: absolute;
        top: -8px;
        right: -8px;
        background: #7536D0;
        color: #fff;
        font-weight: 600;
        justify-content: center;
    }

    .sku-img {
        width: 34px;
        height: 34px;
        border-radius: 4px;
        position: relative;
    }

    .sku-img i {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        position: absolute;
        top: -7px;
        right: -7px;
        background: #7536D0;
        color: #fff;
        font-weight: 600;
        justify-content: center;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .table-box {
        border: 1px solid #E6E6E6;
        margin: 20px 0;
        border-bottom: none;
    }

    .table-upload-img {
        width: 34px;
        height: 34px;
        color: #E6E6E6;
        border-radius: 2px;
        border: 1px solid #E6E6E6;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .all-edit-img {
        width: 14px;
        height: 14px;
        margin-left: 6px;
    }

    .sku-status {
        cursor: pointer;
    }

    .w-e-toolbar {
        display: flex;
        flex-wrap: wrap;
    }

    .el-cascader,
    .el-select {
        width: 100%;
    }

    .el-popover .el-input {
        margin-bottom: 10px;
    }


    .el-popover .el-button--text {
        color: #7536D0;
    }

    .color-999 {
        color: #999;
    }

    .popover-container>p {
        margin-bottom: 10px;
    }

    .question-tip {
        font-size: 24px;
        color: #ccc;
        margin-left: 18px;
    }

    .el-radio {
        margin-right: 12px;
    }

    .flex-1 {
        flex: 1;
    }

    .create-template {
        margin-left: 44px;
        cursor: pointer;
        color: #7536D0;
    }

    .el-tabs__content {
        height: 190px;
        overflow: auto;
    }

    /* .category-inputs input,
    .category-inputs:focus input,
    .category-inputs:hover input {
        background: none;
        border: none;
        border-color: rgba(0, 0, 0, 0) !important;
        width: 120px;
        height: 32px;
    } */

    .el-tag+.el-tag {
        margin-left: 10px;
    }

    .el-tag {
        margin-right: 10px;
        background: rgba(157, 96, 255, 0.1);
        border: 1px solid #9D60FF;
        color: #A268FF;
    }

    .el-tag .el-tag__close,
    .el-tag .el-tag__close:hover {
        color: #7438D5;
        background: rgba(0, 0, 0, 0);
    }

    .button-new-tag {
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        vertical-align: bottom;
    }

    .el-input-group__append {
        line-height: 30px !important;
    }

    .form-goods-input {
        width: 300px;
    }

    .from-activity_date {
        width: 400px;
        height: 40px;
    }

    .table-sku {
        width: 100%;
        max-width: 100%;
        overflow-y: auto;
    }

    .tale-sku-item,
    .sku-image,
    .sku-store-take,
    .sku-price,
    .sku-activity-price,
    .sku-stock,
    .sku-weight,
    .sku-sn,
    .sku-operation {
        padding: 10px;
        flex-shrink: 0;
        justify-content: center;
        border-bottom: 1px solid #e6e6e6;
        height: 54px;
    }

    .tale-sku-item {
        flex: 1;
        min-width: 80px;
    }

    .sku-image {
        width: 48px;
    }

    .sku-store-take {
        width: 300px;
    }

    .sku-store-take .el-select {
        width: 70px;
        margin-right: 10px;
    }

    .sku-store-take .el-input {
        width: 70px;
    }

    .sku-activity-price {
        width: 140px;
    }

    .sku-price,
    .sku-stock,
    .sku-weight,
    .sku-sn,
    .sku-operation {
        width: 90px;
    }

    .category-blank {
        width: 100%;
        text-align: center;
    }

    .category-tag-container {
        flex-wrap: wrap;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        padding: 5px;
        height: 40px;
        min-width: 300px;
    }

    .category-tag-item {
        margin-right: 5px;
        bottom: 5px;
        height: 28px;
        line-height: 28px;
        padding: 0 5px;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        background: #f9f9f9;
    }

    .delete-main-sku {
        width: 20px;
        height: 20px;
    }

    .add-child-sku {
        color: #7536D0;
        cursor: pointer;
    }

    .popover-button-container {
        text-align: right;
        margin: 0
    }

    .control-label {
        width: 100px;
        padding-right: 20px;
        font-weight: 600;
        font-size: 14px;
        color: #606266;
    }

    .editor-container {
        margin: 0;
        align-items: flex-start;
    }

    .goods-part-title {
        font-size: 16px;
        margin: 40px 0 10px 20px;
        font-weight: 600;
    }

    .goods-part-title-first {
        margin-top: 0;
    }

    .sku-store-take-switch {
        margin-left: 20px;
        display: flex;
        align-items: center;
    }

    .el-popover-tip-message {
        margin-left: 10px;
    }

    .table-stock-warning-switch .el-switch {
        margin-right: 18px;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/groupon/libs/vue.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/Sortable.min.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/vuedraggable.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/moment.js"></script>
<div id="goodsDetail" class="open-page-container common-container-scrollbar" v-cloak>
    <div class="preview-body">
        <el-steps :active="stepActive" simple>
            <el-step title="1、基础信息"></el-step>
            <el-step title="2、规格/价格"></el-step>
            <el-step title="3、商品详情"></el-step>
        </el-steps>
        <div class="good-detail-body common-container-scrollbar">
            <el-form :model="goodsDetail" :rules="rules" ref="goodsDetail" label-width="110px">
                <div v-if="stepActive==1">
                    <el-form-item label="商品分类：" prop="category_ids">
                        <div class="display-flex">
                            <el-popover placement="bottom-start" width="600" v-model="visible">
                                <div>
                                    <el-tabs v-if="categoryOptions && categoryOptions.length>0" v-model="activeName"
                                        @tab-click="tabSelect">
                                        <el-tab-pane v-for="tab in categoryOptions" :label="tab.name" :name="tab.name">
                                            <el-cascader-panel v-model="goodsDetail.category_ids_arr"
                                                :options="tab.children" :props="{ multiple: true, checkStrictly: true ,value:'id',label:'name',
                                                children:'children' }" clearable @change="panelChange">
                                            </el-cascader-panel>
                                        </el-tab-pane>
                                    </el-tabs>
                                    <div class="category-blank" v-if="categoryOptions && categoryOptions.length==0">
                                        没有分类,请选择去创建
                                    </div>
                                </div>
                                <div slot="reference">
                                    <div class="display-flex category-tag-container">
                                        <div class="category-tag-item" v-for="(tag,index) in selectedcatArr" :key="tag"
                                            @close="closeTag(index)">
                                            {{tag.label}}
                                        </div>
                                    </div>
                                </div>
                            </el-popover>
                        </div>
                    </el-form-item>
                    <el-form-item label="商品标题：" prop="title">
                        <el-input type="input" v-model="goodsDetail.title" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="副标题：" prop="subtitle">
                        <el-input type="input" v-model="goodsDetail.subtitle" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="商品主图：" prop="image">
                        <div class="display-flex">
                            <div class="goods-image-box display-flex" v-if="goodsDetail.image">
                                <div class="goods-images goods-image">
                                    <el-image class="label-auto" :src="Fast.api.cdnurl(goodsDetail.image)" fit="cover">
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                    <div class="delete-image-button" @click="delImg('image',null)">
                                        <img class="label-auto" src="/assets/addons/groupon/img/goods/close.png">
                                    </div>
                                </div>
                            </div>
                            <div class="add-img display-flex" @click="addImg('image',null,false)"
                                v-if="!goodsDetail.image">
                                <i class="el-icon-plus"></i>
                            </div>
                            <div class="form-tip-message">作用于商城列表；建议尺寸：750*360像素</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="轮播图：" prop="images">
                        <div class="display-flex" style="flex-wrap: wrap;">
                            <div class="goods-image-box display-flex" style="flex-wrap: wrap;"
                                v-if="goodsDetail.images_arr">
                                <draggable class="display-flex" :list="goodsDetail.images_arr" v-bind="$attrs"
                                    :options="{animation:500}">
                                    <div class="goods-images" v-for="(it,index) in goodsDetail.images_arr">
                                        <el-image class="label-auto" :src="Fast.api.cdnurl(it)" fit="cover">
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                        <div class="delete-image-button" @click="delImg('images',index)">
                                            <img class="label-auto" src="/assets/addons/groupon/img/goods/close.png">
                                        </div>
                                    </div>
                                </draggable>
                            </div>
                            <div class="add-img display-flex" @click="addImg('images',null,true)"
                                v-if="!goodsDetail.images_arr || goodsDetail.images_arr.length<9">
                                <i class="el-icon-plus"></i>
                            </div>
                            <div class="form-tip-message" style="margin-left: 0;">作用于商品详情顶部轮播，轮播图可以拖拽图片调整顺序</div>
                        </div>
                    </el-form-item>
                    <!-- <el-form-item label="有效期：" prop="expire_date_arr">
                        <el-date-picker v-model="goodsDetail.expire_date_arr" type="datetimerange"
                            value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"
                            size="small">
                        </el-date-picker>
                    </el-form-item> -->
                    <el-form-item label="是否爆品：" prop="is_hot">
                        <el-switch v-model="goodsDetail.is_hot" :active-value="1" :inactive-value="0"
                            active-color="#7438D5" inactive-color="#eee">
                        </el-switch>
                    </el-form-item>
                    <!-- <el-form-item label="附加标签：" prop="tags_arr">
                        <div>
                            <el-tag :key="tag" v-for="tag in goodsDetail.tags_arr" closable :disable-transitions="false"
                                @close="handleClose(tag)">
                                {{tag}}
                            </el-tag>
                            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput"
                                size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
                            </el-input>
                            <el-button
                                v-if="!inputVisible && goodsDetail && goodsDetail.tags_arr && 1>=goodsDetail.tags_arr.length"
                                class="button-new-tag" size="small" @click="showInput">添加</el-button>
                        </div>
                    </el-form-item> -->
                    <el-form-item label="商品状态：" prop="status">
                        <el-radio-group v-model="goodsDetail.status">
                            <el-radio label="up">上架</el-radio>
                            <el-radio label="hidden">隐藏</el-radio>
                            <el-radio label="down">下架</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="排序：" prop="weigh">
                        <div class="display-flex">
                            <el-input type="number" v-model="goodsDetail.weigh" style="width:300px;" size="small">
                            </el-input>
                            <div class="form-tip-message">排序的大小默认按照从大到小排列</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="虚增销量：">
                        <el-input type="number" v-model="goodsDetail.show_sales" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="浏览人数：">
                        <el-input type="number" v-model="goodsDetail.views" size="small"></el-input>
                    </el-form-item>
                </div>
                <div v-if="stepActive==2">
                    <div>
                        <div class="goods-part-title goods-part-title-first">商品价格</div>
                        <el-form-item label="商品规格：" prop="is_sku">
                            <div class="display-flex">
                                <el-radio-group v-model="goodsDetail.is_sku">
                                    <el-radio :label="0">单规格</el-radio>
                                    <el-radio :label="1">多规格</el-radio>
                                </el-radio-group>
                                <div class="form-tip-message" style="margin-left: 15px;">
                                    如果商品参与了限时购活动,编辑规格可能导致活动规格不可用</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="售卖价格：" prop="price" v-if="goodsDetail.is_sku==1">
                            <div class="display-flex">
                                <el-input type="text" v-model="goodsDetail.price" style="width:300px" size="small">
                                </el-input>
                                <div class="form-tip-message">商品没有优惠的情况下售卖的价格</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="售卖价格：" prop="price" v-if="goodsDetail.is_sku==0">
                            <div class="display-flex">
                                <el-input type="number" v-model="goodsDetail.price" style="width:300px" size="small">
                                </el-input>
                                <div class="form-tip-message">商品没有优惠的情况下售卖的价格</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="划线价格：" prop="original_price">
                            <div class="display-flex">
                                <el-input type="number" v-model="goodsDetail.original_price" style="width:300px"
                                    size="small">
                                    <template slot="append">元</template>
                                </el-input>
                                <div class="form-tip-message">划线价在商品列表及详情会以划线形式显示</div>
                            </div>
                        </el-form-item>
                    </div>
                    <div v-if="goodsDetail.is_sku==0">
                        <!-- 库存预警 -->
                        <div>
                            <el-form-item label="商品库存：" prop="stock">
                                <div class="display-flex">
                                    <el-input v-positive-integer type="number" min="0" v-model="goodsDetail.stock"
                                        style="width:300px" size="small">
                                        <template slot="append">个</template>
                                    </el-input>
                                </div>
                            </el-form-item>
                            <el-form-item label="开启库存预警：">
                                <el-switch v-model="goodsDetail.stock_warning_switch"
                                    @change="changeStockWarningSwitch(0)" active-color="#7438D5" inactive-color="#eee">
                                </el-switch>
                                <span v-if="!goodsDetail.stock_warning_switch"
                                    class="stock-warning-switch-tip">使用默认库存预警</span>
                            </el-form-item>
                            <el-form-item label="库存预警：" v-if="goodsDetail.stock_warning_switch">
                                <div class="display-flex">
                                    <el-input v-positive-integer type="number" min="0"
                                        v-model="goodsDetail.stock_warning" style="width:300px" size="small">
                                        <template slot="append">个</template>
                                    </el-input>
                                </div>
                            </el-form-item>
                        </div>
                        <div class="goods-part-title">自提点抽成</div>
                        <el-form-item label="抽成配置：" prop="take_type">
                            <div class="display-flex" style="height: 40px;">
                                <el-switch v-model="goodsDetail.store_take_switch" active-value="1" inactive-value="0"
                                    active-color="#7438D5" inactive-color="#eee" @change="limitTypeSwitch">
                                </el-switch>
                                <div class="form-tip-message" v-if="goodsDetail.store_take_switch==0">使用默认抽成</div>
                            </div>
                        </el-form-item>
                        <div v-if="goodsDetail.store_take_switch==1">
                            <el-form-item label="抽成类型：" prop="take_type">
                                <el-radio-group v-model="goodsDetail.store_take.take_type">
                                    <el-radio label="money">金额</el-radio>
                                    <el-radio label="rate">比例</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="" prop="take_type">
                                <div class="display-flex" v-if="goodsDetail.store_take.take_type=='money'">
                                    <el-input class="form-goods-input" type="number"
                                        v-model="goodsDetail.store_take.take_money" size="small">
                                        <template slot="append">元</template>
                                    </el-input>
                                    <div class="form-tip-message">自提点按固定金额抽成</div>
                                </div>
                                <div class="display-flex" v-if="goodsDetail.store_take.take_type=='rate'">
                                    <el-input class="form-goods-input" type="number"
                                        v-model="goodsDetail.store_take.take_rate" size="small">
                                        <template slot="append">%</template>
                                    </el-input>
                                    <div class="form-tip-message">自提点按比例抽成</div>
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                    <!-- 是否开启限时活动 -->
                    <div>
                        <div class="goods-part-title">限时活动</div>
                        <el-form-item label="限时购：" prop="limit_activity_switch">
                            <el-switch v-model="goodsDetail.limit_activity_switch" active-value="1" inactive-value="0"
                                active-color="#7438D5" inactive-color="#eee" @change="limitTypeSwitch">
                            </el-switch>
                        </el-form-item>
                        <div v-if="goodsDetail.limit_activity_switch==0">
                            <el-form-item label="类型：" prop="limit_type">
                                <el-radio-group v-model="goodsDetail.limit_rules.limit_type">
                                    <el-radio label="daily">每日限购</el-radio>
                                    <el-radio label="all">累计限购（商品总计可购买数量）</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="数量：" prop="limit_num">
                                <div class="display-flex">
                                    <el-input type="number" v-model="goodsDetail.limit_rules.limit_num"
                                        style="width:300px" size="small">
                                    </el-input>
                                </div>
                            </el-form-item>
                        </div>
                        <div v-if="goodsDetail.limit_activity_switch==1">
                            <el-form-item label="抢购价格：" prop="activity_price" v-if="goodsDetail.is_sku==0">
                                <div class="display-flex">
                                    <el-input type="number" v-model="goodsDetail.activity_price" style="width:300px"
                                        size="small">
                                    </el-input>
                                </div>
                            </el-form-item>
                            <el-form-item label="限购时间：" prop="activity_date_arr">
                                <div class="display-flex from-activity_date">
                                    <el-date-picker v-model="goodsDetail.activity_date_arr" type="datetimerange"
                                        value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                        :default-time="['00:00:00', '23:59:59']" size="small">
                                    </el-date-picker>
                                </div>
                            </el-form-item>
                            <el-form-item label="限购数量：" prop="limit_time_num">
                                <div class="display-flex">
                                    <el-input type="number" v-model="goodsDetail.limit_time_num" style="width:300px"
                                        size="small">
                                    </el-input>
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                    <div>
                        <div class="goods-part-title">商品规格</div>
                        <div v-if="goodsDetail.is_sku==0">
                            <el-form-item label="商品重量：">
                                <div class="display-flex">
                                    <el-input type="input" v-model="goodsDetail.weight" style="width:300px"
                                        size="small">
                                    </el-input>
                                </div>
                            </el-form-item>
                            <el-form-item label="商品编号：">
                                <div class="display-flex">
                                    <el-input type="input" v-model="goodsDetail.sn" style="width:300px" size="small">
                                    </el-input>
                                </div>
                            </el-form-item>
                        </div>
                        <div v-if="goodsDetail.is_sku==1">
                            <div class="add-sku-box">
                                <div class="" v-for="(s, k) in skuList">
                                    <div class="display-flex-b sku-item">
                                        <div class="display-flex">
                                            <div>规格名称：</div>
                                            <div style="width: 120px;">
                                                <el-input type="input" v-model="skuList[k]['name']" maxlength="5"
                                                    placeholder="请输入名称" size="small">
                                                </el-input>
                                            </div>
                                        </div>
                                        <div class="delete-main-sku" @click="deleteMainSku(k)">
                                            <img class="label-auto" src="/assets/addons/groupon/img/goods/close.png">
                                        </div>
                                    </div>
                                    <div class="display-flex sku-item sku-item-level">
                                        <div style="width: 60px;">规格值：</div>
                                        <div class="display-flex sku-item sku-item-level2">
                                            <div class="sku-children" v-for="(sc, c) in s.children">
                                                <el-input type="input" v-model="skuList[k]['children'][c]['name']"
                                                    size="small" placeholder="请输入规格值" maxlength="22">
                                                </el-input>
                                                <div class="display-flex sku-children-del"
                                                    @click="deleteChildrenSku(k,c)">
                                                    <img class="label-auto"
                                                        src="/assets/addons/groupon/img/goods/close.png">
                                                </div>
                                            </div>
                                            <span class="add-child-sku" @click="addChildrenSku(k)">添加</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="display-flex sku-item">
                                    <div class="btn-common add-level1-sku" @click="addMainSku">
                                        <i class="el-icon-plus"></i>
                                        <span>添加规格</span>
                                    </div>
                                </div>
                            </div>
                            <div class="table-box" v-show="skuPrice.length && skuList.length">
                                <div class="table-sku">
                                    <div class="table-sku-row display-flex">
                                        <template v-for="(item, i) in skuList" :key="i">
                                            <div class="tale-sku-item display-flex" v-if="item.children.length">
                                                <span class="th-center">{{item.name}}</span>
                                            </div>
                                        </template>
                                        <div class="sku-image display-flex">图片</div>
                                        <div class="sku-price display-flex">
                                            <span>价格(元)</span>
                                            <el-popover placement="top" width="160" v-model="allEditPopover.price">
                                                <el-input v-model="allEditDatas" placeholder="请输入内容" size="small">
                                                </el-input>
                                                <div class="popover-button-container">
                                                    <el-button size="mini" type="text"
                                                        @click="allEditData('price','cancel')">取消</el-button>
                                                    <el-button type="primary" size="mini"
                                                        @click="allEditData('price','define')">确定</el-button>
                                                </div>
                                                <div slot="reference">
                                                    <img class="all-edit-img"
                                                        src="/assets/addons/groupon/img/goods/batch.png">
                                                </div>
                                            </el-popover>
                                        </div>
                                        <div class="sku-activity-price display-flex"
                                            v-if="goodsDetail.limit_activity_switch==1">
                                            <span>限购价格(元)</span>
                                            <el-popover placement="top" width="160"
                                                v-model="allEditPopover.activity_price">
                                                <el-input v-model="allEditDatas" placeholder="请输入内容" size="small">
                                                </el-input>
                                                <div class="popover-button-container">
                                                    <el-button size="mini" type="text"
                                                        @click="allEditData('activity_price','cancel')">取消
                                                    </el-button>
                                                    <el-button type="primary" size="mini"
                                                        @click="allEditData('activity_price','define')">确定
                                                    </el-button>
                                                </div>
                                                <div slot="reference">
                                                    <img class="all-edit-img"
                                                        src="/assets/addons/groupon/img/goods/batch.png">
                                                </div>
                                            </el-popover>
                                        </div>
                                        <div class="sku-store-take display-flex">
                                            <span>自提点抽成</span>
                                            <el-popover placement="top" width="160" v-model="allEditPopover.store_take">
                                                <div>
                                                    <div class="display-flex" style="margin-bottom: 10px;">
                                                        <el-switch v-model="storeTakeEdit.store_take_switch"
                                                            active-value="1" inactive-value="0" active-color="#7438D5"
                                                            inactive-color="#eee">
                                                        </el-switch>
                                                        <div v-if="storeTakeEdit.store_take_switch==0"
                                                            class="el-popover-tip-message">使用默认抽成</div>
                                                    </div>
                                                    <div v-if="storeTakeEdit.store_take_switch==1">
                                                        <el-select v-model="storeTakeEdit.take_type" placeholder="请选择"
                                                            size="small">
                                                            <el-option label="金额" value="money">
                                                            </el-option>
                                                            <el-option label="比例" value="rate">
                                                            </el-option>
                                                        </el-select>
                                                        <el-input type="input" v-if="storeTakeEdit.take_type=='money'"
                                                            v-model="storeTakeEdit.take_money" size="small">
                                                            <template slot="append">元</template>
                                                        </el-input>
                                                        <el-input type="input" v-if="storeTakeEdit.take_type=='rate'"
                                                            v-model="storeTakeEdit.take_rate" size="small">
                                                            <template slot="append">%</template>
                                                        </el-input>
                                                    </div>
                                                </div>
                                                <div class="popover-button-container">
                                                    <el-button size="mini" type="text"
                                                        @click="allEditData('store_take','cancel')">取消</el-button>
                                                    <el-button type="primary" size="mini"
                                                        @click="allEditData('store_take','define')">确定</el-button>
                                                </div>
                                                <div slot="reference">
                                                    <img class="all-edit-img"
                                                        src="/assets/addons/groupon/img/goods/batch.png">
                                                </div>
                                            </el-popover>
                                        </div>
                                        <div class="sku-stock display-flex">
                                            <span>库存(个)</span>
                                            <el-popover placement="top" width="160" v-model="allEditPopover.stock">
                                                <el-input v-model="allEditDatas" placeholder="请输入内容" size="small">
                                                </el-input>
                                                <div class="popover-button-container">
                                                    <el-button size="mini" type="text"
                                                        @click="allEditData('stock','cancel')">取消</el-button>
                                                    <el-button type="primary" size="mini"
                                                        @click="allEditData('stock','define')">确定</el-button>
                                                </div>
                                                <div slot="reference">
                                                    <img class="all-edit-img"
                                                        src="/assets/addons/groupon/img/goods/batch.png">
                                                </div>
                                            </el-popover>
                                        </div>
                                        <div class="sku-stock display-flex" style="width: 200px;flex-shrink: 0;">
                                            <span>库存预警(个)</span>
                                            <el-popover placement="top" width="200"
                                                v-model="allEditPopover.stock_warning">
                                                <div class="table-stock-warning-switch">
                                                    <el-switch v-model="allstock_warning_switch" active-color="#7438D5"
                                                        inactive-color="#eee"></el-switch>
                                                    <span v-if="!allstock_warning_switch"
                                                        class="stock-warning-switch-tip table-stock-warning-switch-tip">使用默认库存预警</span>
                                                </div>
                                                <el-input v-positive-integer v-if="allstock_warning_switch"
                                                    v-model="allEditDatas" placeholder="请输入内容" size="small">
                                                </el-input>
                                                <div style="text-align: right; margin: 0">
                                                    <el-button size="mini" type="text"
                                                        @click="allEditData('stock_warning','cancel')">取消
                                                    </el-button>
                                                    <el-button type="primary" size="mini"
                                                        @click="allEditData('stock_warning','define','stock_warning_switch')">
                                                        确定</el-button>
                                                </div>
                                                <div slot="reference">
                                                    <img class="all-edit-img"
                                                        src="/assets/addons/groupon/img/goods/batch.png">
                                                </div>
                                            </el-popover>
                                        </div>
                                        <div class="sku-weight display-flex">
                                            <span>重量</span>
                                            <el-popover placement="top" width="160" v-model="allEditPopover.weight">
                                                <el-input v-model="allEditDatas" placeholder="请输入内容" size="small">
                                                </el-input>
                                                <div class="popover-button-container">
                                                    <el-button size="mini" type="text"
                                                        @click="allEditData('weight','cancel')">取消</el-button>
                                                    <el-button type="primary" size="mini"
                                                        @click="allEditData('weight','define')">确定</el-button>
                                                </div>
                                                <div slot="reference">
                                                    <img class="all-edit-img"
                                                        src="/assets/addons/groupon/img/goods/batch.png">
                                                </div>
                                            </el-popover>
                                        </div>
                                        <div class="sku-sn display-flex">
                                            <span>编码</span>
                                            <el-popover placement="top" width="160" v-model="allEditPopover.sn">
                                                <el-input v-model="allEditDatas" placeholder="请输入内容" size="small">
                                                </el-input>
                                                <div class="popover-button-container">
                                                    <el-button size="mini" type="text"
                                                        @click="allEditData('sn','cancel')">
                                                        取消</el-button>
                                                    <el-button type="primary" size="mini"
                                                        @click="allEditData('sn','define')">确定</el-button>
                                                </div>
                                                <div slot="reference">
                                                    <img class="all-edit-img"
                                                        src="/assets/addons/groupon/img/goods/batch.png">
                                                </div>
                                            </el-popover>
                                        </div>
                                        <div class="sku-operation display-flex">当前状态</div>
                                    </div>
                                    <div class="table-sku-row display-flex" v-for="(item, i) in skuPrice" :key="i">
                                        <div class="tale-sku-item display-flex" v-for="(v, j) in item.goods_sku_text"
                                            :key="j">
                                            <span class="th-center">{{v}}</span>
                                        </div>
                                        <div class="sku-image display-flex">
                                            <div class="display-flex table-upload-img">
                                                <div class="sku-img" v-if="item.image">
                                                    <img :src="Fast.api.cdnurl(item.image)" class="label-auto">
                                                    <i class="el-icon-close" @click="delImg('sku',i)"></i>
                                                </div>
                                                <div v-else @click="addImg('sku',i,false)">
                                                    <i class="el-icon-plus" style="font-size:18px;"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="sku-price display-flex">
                                            <el-input type="input" v-model="item.price" size="small"></el-input>
                                        </div>
                                        <div class="sku-activity-price display-flex"
                                            v-if="goodsDetail.limit_activity_switch==1">
                                            <el-input type="input" v-model="item.activity_price" size="small">
                                            </el-input>
                                        </div>
                                        <div class="sku-store-take display-flex">
                                            <div class="display-flex">
                                                <el-switch v-model="item.store_take_switch" active-value="1"
                                                    inactive-value="0" active-color="#7438D5" inactive-color="#eee"
                                                    @change="changeSkuSwitch(i)">
                                                </el-switch>
                                                <div v-if="item.store_take_switch==0" class="form-tip-message">使用默认抽成
                                                </div>
                                            </div>
                                            <div class="sku-store-take-switch" v-if="item.store_take_switch==1">
                                                <el-select v-model="item.store_take.take_type" placeholder="请选择"
                                                    size="small">
                                                    <el-option label="金额" value="money">
                                                    </el-option>
                                                    <el-option label="比例" value="rate">
                                                    </el-option>
                                                </el-select>
                                                <el-input type="input" v-if="item.store_take.take_type=='money'"
                                                    v-model="item.store_take.take_money" size="small">
                                                    <template slot="append">元</template>
                                                </el-input>
                                                <el-input type="input" v-if="item.store_take.take_type=='rate'"
                                                    v-model="item.store_take.take_rate" size="small">
                                                    <template slot="append">%</template>
                                                </el-input>
                                            </div>
                                        </div>
                                        <div class="sku-stock display-flex">
                                            <el-input type="input" v-model="item.stock" size="small"></el-input>
                                        </div>
                                        <div class="sku-stock display-flex" style="width: 200px;flex-shrink: 0;">
                                            <div class="table-stock-warning-switch">
                                                <el-switch v-model="item.stock_warning_switch"
                                                    @change="changeStockWarningSwitch(1,i)" active-color="#7438D5"
                                                    inactive-color="#eee"></el-switch>
                                                <span v-if="!item.stock_warning_switch"
                                                    class="stock-warning-switch-tip table-stock-warning-switch-tip">使用默认库存预警</span>
                                            </div>
                                            <el-input v-positive-integer type="number" min="0" class="table-input"
                                                v-if="item.stock_warning_switch" v-model="item.stock_warning">
                                            </el-input>
                                        </div>
                                        <div class="sku-weight display-flex">
                                            <el-input type="input" v-model="item.weight" size="small"></el-input>
                                        </div>
                                        <div class="sku-sn display-flex">
                                            <el-input type="input" v-model="item.sn" size="small"></el-input>
                                        </div>
                                        <div class="sku-operation display-flex">
                                            <span class="sku-status th-center" @click="editStatus(i)">
                                                {{item.status=='up'?'上架':'下架'}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="stepActive==3">
                    <el-form-item label="服务标签：">
                        <div class="display-flex">
                            <div class="flex-1">
                                <el-select v-model="goodsDetail.service_ids_arr" placeholder="请选择" multiple size="small"
                                    @change="serviceChange" @focus="getServiceOptions">
                                    <el-option v-for="item in serviceOptions" :key="item.value" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="create-template" @click="createTemplate()">
                                新建标签
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="参数详情：">
                        <div>
                            <div class="goods-detail-table">
                                <div class="display-flex goods-detail-item">
                                    <div class="goods-detail-name">
                                        参数名称
                                    </div>
                                    <div class="goods-detail-msg">
                                        内容
                                    </div>
                                    <div class="goods-detail-del">
                                        删除
                                    </div>
                                    <div class="goods-detail-move">
                                        移动
                                    </div>
                                </div>
                                <draggable :list="goodsDetail.params_arr" v-bind="$attrs" :options="{animation:500}">
                                    <div class="display-flex goods-detail-item"
                                        v-for="(it,index) in goodsDetail.params_arr">
                                        <div class="goods-detail-name">
                                            <el-input type="input" v-model="it.title" style="width:90px" size="small">
                                            </el-input>
                                        </div>
                                        <div class="goods-detail-msg">
                                            <el-input type="input" v-model="it.content" style="width:348px"
                                                size="small">
                                            </el-input>
                                        </div>
                                        <div class="goods-detail-del">
                                            <div class="goods-detail-del-icon" @click="delParams(index)">
                                                删除
                                            </div>
                                        </div>
                                        <div class="goods-detail-move">
                                            <img src="/assets/addons/groupon/img/goods/move.png">
                                        </div>
                                    </div>
                                </draggable>
                            </div>
                            <div class="btn-common add-params" @click="addParams">
                                <i class="el-icon-plus"></i>
                                <span>添加参数</span>
                            </div>
                        </div>
                    </el-form-item>
                </div>
                <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action=""
                    v-show="stepActive==3">
                    <div class="display-flex editor-container">
                        <label class="control-label">{:__('Content')}:</label>
                        <div class="flex-1">
                            <textarea id="c-content" class="form-control editor" rows="5" name="row[content]"
                                cols="50"></textarea>
                        </div>
                    </div>
                </form>
            </el-form>
        </div>
    </div>
    <div class="open-page-button-container">
        <div class="dialog-button dialog-button-cancel" @click="gonextback" v-if="stepActive>1">上一步</div>
        <div class="dialog-button dialog-button-define" v-if="stepActive<3" @click="gotoback('goodsDetail')">下一步</div>
        <div class="dialog-button dialog-button-define" v-if="stepActive==3" @click="submitForm('goodsDetail')">确定</div>
    </div>
</div>